<template>
  <div>
    <a-modal v-model:visible="showGroupModal" title="分组" :footer="false">
      <a-form :model="form" layout="vertical" @submit-success="submit">
        <a-form-item required field="name" label="分组名">
          <a-input v-model="form.name"></a-input>
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit">确定</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { labelGroup } from "@/api/service/lcd-device/lcd-device";

import { showGroupModal } from "../data/form";
import { keys } from "../data/table";

const form = ref({ name: "" });

const submit = async () => {
  await labelGroup({
    label: form.value.name,
    mediaIds: keys.value
  });
  keys.value = [];
  showGroupModal.value = false;
  form.value.name = "";
};
</script>

<style lang="scss" scoped></style>
